<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta charset="UTF-8">
	<title>代理</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/daili.css">
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<div class="header_choose">
				<div class="choose_left"><a href="javascript:void(0)">申请代理</a></div>
				<div class="choose_right"><a href="supplier.html">申请供应商</a></div>
			</div>
			<label class="header_right"><img src="../img/ico_msg.png"></label>
		</div>
		<!-- 头部 -->
		<!-- 内容 -->
		<div class="search_wrap">
			<div class="search">
				<label class="search_left">
					<img src="../img/icon_search.png">
				</label>
				<input type="text" name="" placeholder="请输入关键字" class="search_input">
				<label class="search_right">
					<img src="../img/close.png">
				</label>
				<div class="clear"></div>
			</div>
		</div>
		<div class="content">
		<!-- 	 <div class="item">
				<div class="goods_header">
					<img src="../img/90x90.jpg">
					<div class="goods_details">
						<h4>供应商品牌名称</h4>
						<div class="details_icon">
							<img src="../img/agent_ico1.png" alt="">
							<img src="../img/agent_ico2.png" alt="">
							<img src="../img/agent_ico3.png" alt="">
						</div>
					</div>
					<span class="goods_btn">申请代理</span>
					
				</div>
				<div class="goods_pic">
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
				</div>
			</div>
			<div class="item">
				<div class="goods_header">
					<img src="../img/90x90.jpg">
					<div class="goods_details">
						<h4>供应商品牌名称</h4>
						<div class="details_icon">
							<img src="../img/agent_ico1.png" alt="">
							<img src="../img/agent_ico2.png" alt="">
							<img src="../img/agent_ico3.png" alt="">
						</div>
					</div>
					<span class="goods_btn">申请代理</span>
				</div>
				<div class="goods_pic">
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
				</div>
			</div>
			<div class="item">
				<div class="goods_header">
					<img src="../img/90x90.jpg">
					<div class="goods_details">
						<h4>供应商品牌名称</h4>
						<div class="details_icon">
							<img src="../img/agent_ico1.png" alt="">
							<img src="../img/agent_ico2.png" alt="">
							<img src="../img/agent_ico3.png" alt="">
						</div>
					</div>
					<span class="goods_btn">申请代理</span>
				</div>
				<div class="goods_pic">
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
				</div>
			</div>
			<div class="item">
				<div class="goods_header">
					<img src="../img/90x90.jpg">
					<div class="goods_details">
						<h4>供应商品牌名称</h4>
						<div class="details_icon">
							<img src="../img/agent_ico1.png" alt="">
							<img src="../img/agent_ico2.png" alt="">
							<img src="../img/agent_ico3.png" alt="">
						</div>
					</div>
					<span class="goods_btn">申请代理</span>
				</div>
				<div class="goods_pic">
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
					<div class="pic_wrap">
						<img src="../img/135x135.jpg">
					</div>
				</div>
			</div>  -->
		</div>
		<div class="mask">
			<div class="mask_content">
				<h4>申请代理</h4>
				<div class="input_apply">
					<span>联系人</span>
					<input type="text" name="" class="contact" placeholder="请输入联系人">
				</div>
				<div class="input_apply">
					<span>联系电话</span>
					<input type="text" name="" class="phone" placeholder="请输入联系人电话">
				</div>
				<div class="input_apply">
					<span>备注</span>
					<input type="text" name="" class="beizhu" placeholder="请输入备注名称">
				</div>
				<div class="line"></div>
				<div class="button">提交</div>
			</div>
		</div>
		<div class="mask_s">
			<div class="ms_content">
				<i class="iconfont icon-smile"></i>
				<p>申请代理提交成功</p>
			</div>
		</div>
		<div class="mask_us">
			<div class="mus_content">
				<i class="iconfont icon-laba-"></i>
				<p class="p">输入框不能为空</p>
			</div>
		</div>
		<!-- 内容 -->
	</div>
</body>

<script type="text/javascript">
	var xhr = new XMLHttpRequest();
	xhr.addEventListener("readystatechange",function(e){
		if(xhr.readyState==4 && xhr.status==200){
			console.log(JSON.parse(e.target.response))
			var Obj = JSON.parse(e.target.response).goods
			readData(Obj)
		}
	})
	xhr.open("get","https://www.easy-mock.com/mock/5bacade73679ca0f56b03f93/shenqing")
	xhr.send();

	function readData(res){
		var content = document.querySelector(".content");
		var obj = res
		var template=function(goodsIcon1,goodsIcon2,goodsIcon3,goodsImg1,goodsImg2,goodsImg3,goodsImg4,goodsTitle,goodsPic){
			return  `
					<div class="goods_header">
						<img src=${goodsPic}>
						<div class="goods_details">
							<h4>供应商品牌名称</h4>
							<div class="details_icon">
								<img src=${goodsIcon1} alt="">
								<img src=${goodsIcon2} alt="">
								<img src=${goodsIcon3} alt="">
							</div>
						</div>
						<span class="goods_btn">申请代理</span>
					</div>
					<div class="goods_pic">
						<div class="pic_wrap">
							<img src=${goodsImg1}>
						</div>
						<div class="pic_wrap">
							<img src=${goodsImg1}>
						</div>
						<div class="pic_wrap">
							<img src=${goodsImg1}>
						</div>
						<div class="pic_wrap">
							<img src=${goodsImg1}>
						</div>
					</div>
			`
		}
		obj.forEach(function(el,index){
			var item = document.createElement("div");
			item.classList.add("item")
			item.innerHTML=template(el.goodsIcon1,el.goodsIcon2,el.goodsIcon3,el.goodsImg1,el.goodsImg1,el.goodsImg2,el.goodsImg3,el.goodsImg4,el.goodsPic,el.goodsTitle);
			content.appendChild(item)
			run()
		})
	}

</script>
<script type="text/javascript">
	var search_right = document.querySelector(".search_right");
	var txt = document.querySelector("input[type='text']")
	search_right.addEventListener("click",function(){
		txt.value=""
	})
	function run(){
		let goods_btns = document.querySelectorAll(".goods_btn")
		for(var i = 0;i<goods_btns.length;i++){
			(function(a){
				let mask = document.querySelector(".mask")
				let mask_s = document.querySelector(".mask_s")
				let mask_us = document.querySelector(".mask_us")
				let contact = document.querySelector(".contact")
				let phone = document.querySelector(".phone")
				let beizhu = document.querySelector(".beizhu")
				let button = document.querySelector(".button")
				let p = document.querySelector(".p")
				let goods_headers = document.querySelectorAll(".goods_header")
				goods_btns[a].addEventListener("click",function(e){
					mask.style.display="block"
					for(let j =0;j<goods_headers.length;j=goods_headers.length){
							(function(b){
								goods_btns[b].innerText="已申请"
							})(a)
						}
					
				})
				button.addEventListener("click",function(e){
					if(contact.value&&phone.value&&beizhu.value){
						if(contact.value.length < 1 || contact.value.length >= 4 || /[^\u4e00-\u9fa5]/.test(contact.value)){
							p.innerHTML="<p class='p'>需纯中文,长度小于4</p>"
							mask_us.style.display="block"
							let timer = setTimeout(function(){
								mask_us.style.display="none"
							},2000)
							contact.value=""
							return
						}
						if(!/^1\d{10}$/.test(phone.value)){
							p.innerHTML="<p class='p'>以1开头的11位数字</p>"
							mask_us.style.display="block"
							let timer = setTimeout(function(){
								mask_us.style.display="none"
							},2000)
							phone.value=""
							return
						}
						if(beizhu.value==""||!beizhu.value.trim()){
							p.innerHTML="<p class='p'>不能为空</p>"
							mask_us.style.display="block"
							let timer = setTimeout(function(){
								mask_us.style.display="none"
							},2000)
							beizhu.value=""
							return
						}
						mask.style.display="none"
						mask_s.style.display="block"
						let time = setTimeout(function(){
							mask_s.style.display="none"
						},2000)
						
					}else{
						mask_us.style.display="block"
						let timer = setTimeout(function(){
							mask_us.style.display="none"
						},2000)
						return
					}
				})
			})(i)
		}
	}
	run()

</script>
</html>